<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器 语法：选择器 hover 悬停功能改变效果【所有元素都可以用】*/
			h1:hover{
				color:#e4393c
			}
			/*练习 页面生成200ox*200px四方块 默认红色  鼠标悬停后  调整黄色*/
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
			}
		
			div:hover{
				background-color:lightpink;
			}
			/*未点击时*/
			a:link{
				color: #e4393c;
				/*下划线*/
				text-decoration: none;
			}
			/*点击后状态*/
			a:visited{
				color:blue
			}
			/*悬停状态*/
			a:hover{
				color:yellow;
			}
			/*点击跳转状态*/
			a:active{
				font-size: 50px;
			}
			input:focus{
				background: #e4393c;
			}
			li:first-child{
				color:#41ee6a
			}
			li:last-child{
				color: #e70d3c;
			}
			li:nth-child(3){
				font-size: 20px;
				color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	<h1>悬停效果</h1>
	<div></div>
	<h1>针对超链接了解4中状态</h1>
	<a href="#">超链接1</a>
	<a href="#">超链接2</a>
	</body>
</html>